import React from 'react';
// import logo from './logo.svg';
import './App.css';
import Home from './pages/home/Home'
import Counter from './pages/counter/Counter'
import Hoc from './components/Hoc'
import Button from './components/Button'

import { request } from './utils/http'
import MyInput from './components/MyInput'
import MyForm from './components/MyForm'

interface IProps {

}
interface IState {
  count: number
}
class App extends React.Component<IProps, IState> {
  constructor(props: IProps){
    super(props)
    this.state = {
      count: 0
    }
  }

  incrementCount = ()=>{
    this.setState({
      count: this.state.count + 1
    })
  }

  decrementCount = ()=>{
    this.setState({
      count: this.state.count - 1
    })
  }

  handleClick = (e: React.MouseEvent)=>{
    console.log(e)
    console.log(e.target)
  }

  async componentDidMount(){
    let rs = await request({
      url: 'http://www.baidu.com',
      type: 'get'
    })
    console.log(rs)
  }
  
  render(){
    return (
      <div className="App">
        <h2>类组件的应用</h2>
        <Home name="home组件"></Home>
        <hr/>
        <h2>函数式组件中的应用</h2>
        <Counter
          count = {this.state.count}
          increment = {this.incrementCount}
          decrement = {this.decrementCount}
        ></Counter>
        <hr/>
        <h2>高阶组件</h2>
        <Hoc></Hoc>
        <hr/>
        <h2>事件介绍</h2>
        <Button
            click={this.handleClick}
          >
          <span>button test</span>
        </Button>
        <hr/>
        <h2>受控组件</h2>
        <MyInput></MyInput>
        <hr/>
        <h2>非受控组件</h2>
        <MyForm></MyForm>
      </div>
    );
  }
}


// function App() {
//   return (
//     <div className="App">
//       <Home name="home组件"></Home>
//       <hr/>
//       {/* <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.tsx</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a> 
//       </header>*/}
//     </div>
//   );
// }

export default App;
